<!--  -->
<template>
  <div id="article" class="border flex column grow">
    <div class="head flex shrink">
      <div class="type clear">
        <span class="item fl" :class="{ cur: !type }" @click="type = 0"
          >头条新闻</span
        >
        <span class="item fl" :class="{ cur: type }" @click="type = 1"
          >上市公司</span
        >
      </div>
    </div>
    <div class="flex grow">
      <div class="flex column shrink articleList">
        <div class="list" @scroll="scrollD">
          <div
            class="item flex"
            v-for="(item, index) in articleList"
            :key="item.id"
            :class="{ cur: index == cur }"
            @click="toggle(index)"
          >
            <p class="title" :class="item.class">{{ item.title }}</p>
            <p class="time shrink">{{ item.time }}</p>
          </div>
        </div>
      </div>
      <div class="flex grow column articleDetail" v-if="articleList.length > 0">
        <div class="box" ref="articleDetail">
          <div class="title">{{ articleDetail.title }}</div>
          <div class="time">{{ articleDetail.time }}</div>
          <div
            class="detail"
            v-html="articleDetail.content"
            @click="viewImg"
          ></div>
        </div>
      </div>
    </div>
    <openImg v-bind:imgSrc.sync="imgSrc"></openImg>
  </div>
</template>

<script>
import { getCompanyList, getNewsDetail } from "../api/index";
import dayjs from "dayjs";
import openImg from "../components/openImg";
import { setTitle } from "../script/utils";
// import { GW } from "@/common/const";
import {GW} from "../script/const";
export default {
  data() {
    return {
      articleList: [],
      type: 0,
      path: GW,
      cur: 0,
      imgSrc: "",
      params: {
        pageNum: 1,
        pageSize: 30,
      },
      articleDetail: {
        title: "",
        time: "",
        content: "",
      },
      count: 1,
    };
  },
  watch: {
    cur() {
      this.getNewsDetail();
      this.$refs.articleDetail.scrollTop = 0;
    },
    type() {
      this.cur = 0;
      this.count = 1;
      this.type ? this.getCompanyList() : this.getHeadList();
    },
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      setTitle("头条新闻");
      vm.getHeadList();
    });
  },
  components: { openImg },

  computed: {},

  mounted() {},

  methods: {
    viewImg(e) {
      if (e.path[0].tagName == "IMG") {
        this.imgSrc = e.path[0].src;
      }
    },
    async toggle(index) {
      this.cur = index;
      this.getNewsDetail();
    },
    handler(data) {
      return data.map((item) => {
        item.time = dayjs(item.publDate).format("MM-DD");
        item.class = {
          ellipsis: item.title.length > 30,
        };
        item.title =
          item.title.length > 30 ? item.title.substring(0, 30) : item.title;
        return item;
      });
    },
    scrollD(e) {
      const { scrollTop, scrollHeight, clientHeight } = e.target;
      if (scrollTop + clientHeight == scrollHeight) {
        this.type ? this.getCompanyList() : this.getHeadList();
      }
    },
    async getHeadList() {
      await getHeadList({
        pageNum: 1,
        pageSize: this.params.pageSize * this.count,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const handlerData = this.handler(data);
          this.articleList = handlerData;
          if (this.count == 1) {
            this.getNewsDetail();
          }
          if (data.length > 0) {
            this.count++;
          }
        }
      });
    },
    async getCompanyList() {
      await getCompanyList({
        pageNum: 1,
        pageSize: this.params.pageSize * this.count,
      }).then((back) => {
        if (back.status == 1) {
          let data = back.data;
          const handlerData = this.handler(data);
          this.articleList = handlerData;
          if (this.count == 1) {
            this.getNewsDetail();
          }
          if (data.length > 0) {
            this.count++;
          }
        }
      });
    },
    async getNewsDetail() {
      const guid = this.articleList[this.cur].guid;
    //   await getNewsDetail({ guid }).then((back) => {
      await getNewsDetail({ newsId:guid }).then((back) => {
        if (back.status == 1) {
          let title = back.data.title;
          let publ_time_stamp = back.data.publDate;
          let content = back.data.content;
          this.articleDetail = {
            title,
            time: dayjs(publ_time_stamp).format("YYYY-MM-DD HH:mm"),
            // content,
             content:content.replace(/  /g,"</br>"),
          };
        }
      });
    },
  },
};
</script>
<style>
.detail img {
  display: block;
  max-width: 90% !important;
}
</style>
<style lang="scss" scoped>
.border {
  border: 1px solid #27272d;
}
#article {
  width: 1200px;
  margin: 10px auto 20px;
  border-radius: 6px;
  .head {
    height: 34px;
    background: #27272d;
    align-items: center;
    padding-left: 14px;
    color: #a9adb1;
    font-size: 14px;
    align-items: center;

    .type {
      .item {
        height: 24px;
        line-height: 24px;
        color: #ffffff;
        font-size: 16px;
        padding: 0 8px;
        cursor: pointer;
        position: relative;
        &.cur {
          margin: 0 10px;
          background: #35497c;
          border-radius: 4px;
        }
      }
    }
  }
  .articleList {
    width: 551px;
    .list {
      overflow: auto;
      line-height: 29px;
      .item {
        cursor: pointer;
        font-size: 16px;
        color: #999999;
        padding: 0 10px 0 15px;
        justify-content: space-between;
        &:nth-of-type(5n) {
          padding-bottom: 5px;
          margin-bottom: 5px;
          box-sizing: border-box;
          border-bottom: 1px solid #15161c;
        }
        .title {
          white-space: nowrap;
          overflow: hidden;
          margin-right: 10px;
          &.ellipsis::after {
            content: "...";
            clear: both;
            display: inline-block;
          }
        }
        &:hover,
        &.cur {
          background: #1d202c;
          color: #ffffff;
        }
      }
    }
  }
  .articleDetail {
    .box {
      padding: 0 42px;
      overflow: auto;
      .title {
        color: #dddddd;
        font-size: 24px;
        line-height: 28px;
        padding: 15px 0 20px;
        word-break: break-all;
        text-align: center;
      }
      .time {
        color: #cbcbcb;
        font-size: 15px;
        text-align: center;
        padding-bottom: 18px;
        margin-bottom: 15px;
        border-bottom: 1px solid #1b1d21;
      }
      .detail {
        color: #b1b5c7;
        font-size: 18px;
        line-height: 30px;
        word-break: break-all;
      }
    }
  }
}
</style>
